<template>
	<div class="language">
		<div class="add-btn" v-if="editState == 0" @click="addLag"><img src="../../../../assets/me/up.png"><span>添加</span></div>
		<div class="title">语言能力</div>
		<div class="language-content" v-if="editState == 0 && form.languages.length>0">
			<div class="language-item" v-for="(items,index) in form.languages" :key="index" v-show="items.language">
				<div class="language-name">{{items.language}}</div>
				<div class="language-level">{{items.proficiency==1?'一般':(items.proficiency==2?'熟练':'精通')}}</div>
			</div>
		</div>
		<div class="language-content no-data" v-if="editState == 0 && form.languages.length==0">
			语言能力是提升求职竞争力的法宝，千万别谦虚啊！
		</div>
		<div class="language-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="form"  label-width="85px" label-position="left" class="flex">

					<div class="edit-left">
						<div class="edit-item flex" v-for="(items,index) in form.languages" :key="index">
							<el-form-item label="选择语种：" class="flex-item">
								<el-select v-model="items.language" placeholder="请选择语种" class="select-input">
									<el-option label="英语" value="英语"></el-option>
									<el-option label="汉语" value="汉语"></el-option>
									<el-option label="法语" value="法语"></el-option>
									<el-option label="德语" value="德语"></el-option>
									<el-option label="意大利语" value="意大利语"></el-option>
									<el-option label="阿拉伯语" value="阿拉伯语"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>

					<div class="edit-right flex-item">
						<div class="edit-item flex" v-for="(items,index) in form.languages" :key="index">
							<el-form-item label="熟悉程度：" class="flex-item">
								<el-select v-model="items.proficiency" placeholder="请选择熟悉程度" class="select-input">
										<el-option label="一般" value="1"></el-option>
										<el-option label="熟悉" value="2"></el-option>
										<el-option label="精通" value="3"></el-option>
									</el-select>
							</el-form-item>
							<div class="option-icon">
								<img src="../../../../assets/me/del-lag.png" class="del-lag" @click="delLag(index)"/>
							</div>
						</div>
					</div>

				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="cancelEdit">取消</div>
					<span class="tips">添加你掌握的语言，最多可添加6种语言</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeLanguage} from '@/api/me/resume'
	export default {
		name:'language',
		props:['resumeLanguages'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				editIndex:0,
				form:{
					"languages": this.resumeLanguages,
					"resumeId": this.$route.query.id
				},
				copyList:null,
				editForm:{
					"language": "",
					"languageId": 0,
					"proficiency": "",
					"resumeId": this.$route.query.id,
					"status": 1
				},
			}
		},
		watch:{

			form:{
				handler(newVal, oldVal) {},
				immediate: true,
				deep: true
			},

			resumeLanguages(val){
				if(val.length < 6){
					for (let i = 0; i < (6 - val.length); i++) {
						var arr={ language: "", proficiency: "", status : 0 };
						val.push(arr)
					}
				}
				this.form.languages = val;
			}
		},
		methods: {
			saveEdit(){
					for (let i = 0; i < this.form.languages.length; i++) {
						if(this.form.languages[i].language == ''){
							this.form.languages[i].status = 0;
						}else{
							this.form.languages[i].status = 1;
						}
					}

					updateResumeLanguage(this.form).then(res => {
						this.$message.success('保存成功');
						this.editState=0;
					}).catch(err => {
						this.$message.error(err);
					})
			},
			addLag(){
				this.editState=1;
			},
			cancelEdit(){
				this.editState=0;
			},
			delLag(index){
				this.form.languages[index].status = 0;
				this.form.languages[index].language = '';
				this.form.languages[index].proficiency = '';
			},
		}
	}
</script>
<style lang="scss">
	.language{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.language-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.language-content{
			margin-top: 25px;
			color: #787878;
			line-height: 30px;
			overflow: hidden;
			.language-item{
				min-width: 66px;
				border:1px solid #3EABC4;
				float: left;
				margin-right: 20px;
				border-radius: 2px;
				.language-name{
					background-color: #3EABC4;
					color: #fff;
					text-align: center;
					box-sizing:border-box;
					padding: 0 10px;
				}
				.language-level{
					text-align: center;
					color: #3EABC4;
				}
			}
		}
		.language-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					width: 470px;
					box-sizing: border-box;
				}
				.edit-right{
					padding-right: 10px;
					
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}
						.el-input{
							width: 100%;
						}
						
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
					.option-icon{
						height: 26px;
						width: 26px;
						margin-top: 5px;
						margin-left: 5px;
						cursor: pointer;
						img{
							display: block;
							height: 100%;
							width: 100%;
						}
						.add-lag{
							display: none;
						}
					}
				}
				// .edit-item:last-child{
				// 	.option-icon{
				// 		.add-lag{
				// 			display: block;
				// 		}
				// 		.del-lag{
				// 			display: none;
				// 		}
				// 	}
					
				// }
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					.tips{
						font-weight: 400;
						color: #BBBBBB;
						line-height: 36px;
						margin-left: 20px;
					}
					
				}
			}
		}
	}
</style>
